<template>
  <div class="flex main flex-col text-white pb-2">
    <TopNav />
    <div class="flex flex-1 gc-2">
      <!-- 侧边栏 -->
      <SideBar class="h-100" />

      <!-- 核心展示区域 -->
      <div class="flex flex-col flex-1 relative">
        <div class="actions-list flex justify-between align-center py-12 px-8">
          <div class="flex gc-2 align-center">
            <!-- 选择切换模板 -->
            <a-button
              type="primary"
              size="small"
              :disabled="!pageSetting.mode"
              @click="setTemplateMode"
            >
              选择模板
            </a-button>

            <!-- 选择模式 -->
            <a-dropdown-button size="small">
              浏览模式
              <template #overlay>
                <a-menu>
                  <a-menu-item v-for="(item, k) in gridList" :key="k" @click="selectViewMode(item)">
                    <ViewGrid :flex="item" />
                  </a-menu-item>
                </a-menu>
              </template>
              <template #icon><DownOutlined /></template>
            </a-dropdown-button>
          </div>
          <div class="flex gc-2">
            <a-tooltip>
              <a-button
                size="small"
                ghost
                shape="circle"
                :disabled="currentItem.length > 0"
                @click="download"
              >
                <template #icon>
                  <DownloadOutlined />
                </template>
              </a-button>
              <template #title> 一键导出所有文件 </template>
            </a-tooltip>

            <a-button size="small" ghost @click="openDictionary"> 样本字典 </a-button>
            <a-button size="small" type="primary" ghost @click="openGenerate"> 预览 </a-button>
          </div>
        </div>

        <!-- 预览界面 -->
        <GeneratePreview v-if="subChildren.generate" @onClose="subChildren.generate = false" />

        <!-- 字典 -->
        <Dictionary v-model:show="subChildren.dictionary"></Dictionary>
        <!--核心界面 -->
        <div class="flex-1 flex gc-2">
          <ConfigVue :class="[`flex-${currentMode[0]}`]" :style="{ width: percent * 100 + '%' }" />
          <Preview
            :class="[`flex-${currentMode[1]}`]"
            :style="{ width: ((1 - percent) * 100).toFixed(2) + '%' }"
          />
        </div>
        <PreviewPage />
      </div>
    </div>
  </div>
  <div class="hidden flex flex-s">暂时不支持小屏设备浏览</div>
</template>

<script lang="ts" setup>
import TopNav from "./layout/TopNav.vue";
import SideBar from "./layout/Sidebar.vue";
import Preview from "./layout/Preview.vue";
import ConfigVue from "./layout/Config.vue";
import ViewGrid from "./home/ViewGrid.vue";
import { computed, ref } from "vue";
import { getRatio, setRatio } from "@/store/utils/setting";
import { downloadText, formatCode } from "@/utils/utils";
import { treeBus } from "./bus/treeData";
import { getTreeData } from "@/store/utils/project";
import { setTemplateMode, pageSetting } from "./bus/bin";
import GeneratePreview from "./home/GeneratePreview.vue";
import Dictionary from "./home/Dictionary.vue";
import PreviewPage from "./home/PreviewPage.vue";
import { DownloadOutlined, DownOutlined } from "@ant-design/icons-vue";
const subChildren = ref({
  generate: false,
  dictionary: false
});

const openGenerate = () => {
  subChildren.value.generate = true;
  subChildren.value.dictionary = false;
};
const openDictionary = () => {
  subChildren.value.generate = false;
  subChildren.value.dictionary = true;
};
/**
 * todo:分栏百分比
 *
 */
const percent = computed(() => {
  return currentMode.value[0] / (currentMode.value[0] + currentMode.value[1]);
});
/* git test */
/* 选择浏览模式 */
const selectViewMode = (item: Array<number>) => {
  setRatio(item);
};

/* 下载的状态 */
const currentItem = computed(() => {
  return treeBus.selectItem;
});
/* 当前窗口大小模式 */
const currentMode = computed(() => {
  return getRatio();
});
const download = () => {
  downloadText(formatCode(getTreeData()));
};

const gridList = ref([
  [1, 1],
  [1, 2],
  [2, 1],
  [3, 1],
  [4, 1]
]);
</script>

<style lang="scss" scoped>
.main {
  height: 100vh;
  overflow: hidden;
  min-width: 1440px;
}
.hidden {
  color: #eee;
  height: 100vh;
}
@media screen and (max-width: 1440px) {
  .main {
    display: none;
  }
}
@media screen and (min-width: 1439px) {
  .hidden {
    display: none;
    color: white;
  }
}

.actions-list {
  background-color: #444;
  line-height: 48px;
  margin-bottom: 8px;
}
input {
  color: #333 !important;
}
</style>
